<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计算机组成基础问答系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        .input-group {
            margin: 20px 0;
        }
        #questionInput {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            margin-bottom: 10px;
        }
        button {
            background: #009688;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .answer-box {
            margin: 20px 0;
            padding: 15px;
            border-radius: 8px;
            background: #f8f9fa;
        }
        .score-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            margin: 5px;
            font-size: 0.9em;
        }
        .knowledge-ref {
            color: #666;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>计算机组成问答系统</h1>
    <div class="input-group">
        <textarea id="questionInput" placeholder="请输入您的问题，例如：什么是冯诺依曼体系结构？"></textarea>
        <button onclick="processQuestion()">提交问题</button>
    </div>

    <div class="answer-box" id="referencedAnswer">
        <h3>参考回答</h3>
        <div id="refAnswerText"></div>
        <div id="refScores"></div>
    </div>

    <div class="answer-box" id="independentAnswer">
        <h3>直接回答</h3>
        <div id="indAnswerText"></div>
        <div id="indScores"></div>
    </div>

    <div class="knowledge-ref" id="referenceTexts"></div>

<script>
// 知识库数据
const knowledgeBase = [
    {
        keywords: ["冯诺依曼", "体系结构", "组成"],
        answer: "冯诺依曼体系结构包含五大核心组件：运算器、控制器、存储器、输入设备和输出设备。其核心思想是存储程序概念，即指令和数据共同存储在同一个存储器中。",
        reference: "《计算机组成与设计》第三章"
    },
    {
        keywords: ["CPU", "功能", "作用"],
        answer: "CPU（中央处理器）主要功能包括：1. 从内存中读取指令 2. 解码指令 3. 执行算术逻辑运算 4. 控制各部件协调工作。其中ALU负责运算，CU负责控制。",
        reference: "《计算机体系结构基础》2.1节"
    }
];

// 预定义通用回答
const genericAnswers = [
    "计算机组成主要研究计算机硬件系统的结构、功能及其相互关系。",
    "这个问题涉及计算机系统的核心组件及其协作方式。",
    "计算机体系结构的设计需要平衡性能、成本和功耗等多个因素。"
];

function processQuestion() {
    const question = document.getElementById('questionInput').value.toLowerCase();
    
    // 查找最佳匹配
    let bestMatch = null;
    let maxScore = 0;
    
    knowledgeBase.forEach(item => {
        const score = calculateMatchScore(question, item.keywords);
        if (score > maxScore) {
            maxScore = score;
            bestMatch = item;
        }
    });

    // 生成回答
    const refAnswer = bestMatch ? bestMatch.answer : "未找到相关参考信息";
    const indAnswer = generateIndependentAnswer(question);
    
    // 计算评分
    const refScores = evaluateAnswer(refAnswer, question);
    const indScores = evaluateAnswer(indAnswer, question);
    
    // 显示结果
    displayResults(refAnswer, indAnswer, bestMatch?.reference, refScores, indScores);
}

function calculateMatchScore(question, keywords) {
    return keywords.filter(kw => question.includes(kw)).length;
}

function generateIndependentAnswer(question) {
    // 简单回答生成逻辑
    const keywords = ["cpu", "存储", "总线", "指令"];
    const matchCount = keywords.filter(kw => question.includes(kw)).length;
    return matchCount > 0 ? genericAnswers[Math.floor(Math.random()*genericAnswers.length)] 
                         : "这个问题需要更多上下文信息才能准确回答";
}

function evaluateAnswer(answer, question) {
    // 简单评分逻辑
    const keywordMatch = (answer.match(/[CPU|存储|总线|指令]/g) || []).length;
    return {
        relevance: Math.min(keywordMatch * 30 + 40, 95),  // 相关性评分
        coverage: Math.floor(Math.random() * 40 + 60),    // 覆盖率
        hallucination: Math.floor(Math.random() * 20)     // 幻觉指数
    };
}

function displayResults(refAns, indAns, refSource, refScores, indScores) {
    // 显示参考回答
    document.getElementById('refAnswerText').innerHTML = refAns;
    document.getElementById('refScores').innerHTML = `
        <div class="score-badge" style="background:#f44336">综合评分：${0.1*refScores.hallucination+0.3*refScores.coverage+0.7*refScores.relevance}%</div>
    `;

    // 显示独立回答
    document.getElementById('indAnswerText').innerHTML = indAns;
    document.getElementById('indScores').innerHTML = `
        <div class="score-badge" style="background:#f44336">综合评分：${0.1*indScores.hallucination+0.3*indScores.coverage+0.7*indScores.relevance}%</div>
    `;  

    // 显示参考文献
    document.getElementById('referenceTexts').innerHTML = refSource ? 
        `参考来源：${refSource}` : "本次回答未使用参考资料";
}

</script>
</body>
</html>